<template>
  <div id="app">
    <div class="header">
      <img src="./../../../static/images/logoPhone.png">
      <el-tabs v-model="activeName" class="elTabs">
        <el-tab-pane label="手机端" name="first"></el-tab-pane>
        <el-tab-pane label="PC端" name="second">配置管理</el-tab-pane>
      </el-tabs>
      <p class="headerP1">
        <svg class="icon test422" aria-hidden="true">
          <use xlink:href="#icon-test134"></use>
        </svg>
        <span style="padding-left:5px;">设置</span>
      </p>
      <p class="headerP2">
        <svg class="icon test80" aria-hidden="true">
          <use xlink:href="#icon-test276"></use>
        </svg>
        <span style="padding-left:5px;">主题</span>
      </p>
    </div>
    <div class="phone">
      <div class="phone-left">
        <ul class="phoneLeftUl">
          <li>页面管理</li>
          <li @click="li1" :class="{ active: isActive1}">店铺主页</li>
          <li @click="li2" :class="{ active: isActive2}">商品列表</li>
          <li @click="li3" :class="{ active: isActive3}">商品分类</li>
          <li @click="li4" :class="{ active: isActive4}">微页面</li>
          <li>内容管理</li>
          <li @click="li5" :class="{ active: isActive5}">店铺导航</li>
          <li @click="li6" :class="{ active: isActive6}">悬浮窗</li>
          <li @click="li7" :class="{ active: isActive7}">公共广告</li>
          <li @click="li8" :class="{ active: isActive8}">素材库</li>
          <li @click="li9" :class="{ active: isActive9}">店铺模板</li>
        </ul>
      </div>
      <div class="phone-right">
        <div class="liResuant">
          <el-row class="liResRow">
            <el-col :span="3">
              <span>页面管理&nbsp;/</span>
              <span>&nbsp;店铺主页</span>
            </el-col>
            <el-col :span="1" :offset="17" class="liResIc1">预览</el-col>
            <el-col :span="1" class="liResIc2">编辑</el-col>
          </el-row>
          <div class="liResuant-contents">
            <!-- 整个大的商品列表 -->
            <div class="contents-left">
              <img src="./../../../static/images/weiImg.png" alt>
              <ul class="contents-left-ul" v-show="showTop">
                <li>综合</li>
                <li>价格</li>
                <li>销量</li>
                <li>筛选</li>
              </ul>
              <!-- 需要根据选择不同的radio来进行切换的部分 -->
              <!-- 默认 -->
              <p class="contents-left-list-kong" v-show="showKong"></p>
              <div class="contents-left-list" v-show="showMo">
                <div class="list">
                  <div class="listP" v-for="(site,key) in listData" :key="key">
                    <img :src="site.url">
                    <div class="listPRight">
                      <p class="listDlp1">{{site.name}}</p>
                      <p class="listDlp2">{{site.biao}}</p>
                      <p class="listDlp3">
                        <span>￥{{site.price}}</span>
                        /瓶
                      </p>
                      <p style="background-color: #cd5511;" class="iconfont icon-gouwuche"></p>
                    </div>
                  </div>
                  <p class="listKong2"></p>
                </div>
              </div>
              <!-- 快速下单： -->
              <div class="fastOrder" v-show="showFast">
                <div class="fastOrder-left">
                  <ul>
                    <li>全部商品</li>
                    <li>面霜</li>
                    <li>面膜</li>
                    <li>洗脸液</li>
                    <li>口红</li>
                    <li>香水</li>
                    <li>玻尿酸</li>
                  </ul>
                </div>
                <div class="fastOrder-right">
                  <div class="listP" v-for="(site,key) in listData" :key="key">
                    <img :src="site.url">
                    <div class="listPRight">
                      <p class="listDlp1">{{site.name}}</p>
                      <p class="listDlp2">{{site.biao}}</p>
                      <p class="listDlp3">
                        <span>￥{{site.price}}</span>
                        /瓶
                      </p>
                      <p
                        style="background-color: #cd5511;margin:-20px 0px 0px 120px"
                        class="iconfont icon-gouwuche"
                      ></p>
                    </div>
                  </div>
                  <div class="fastOrderKong"></div>
                </div>
              </div>
              <!-- 大图模式 -->
              <div class="bigType" v-show="showType">
                <div class="big">
                  <div class="listBig">
                    <img src="./../../../static/images/jurice.jpg">
                    <p class="listDlp1">VB钙片</p>
                    <p class="listDlp2">推荐</p>
                    <p class="listDlp3">
                      <span>￥190.00</span>
                      /瓶
                    </p>
                    <p
                      style="background-color: #cd5511;margin:-10px 0px 0px 150px"
                      class="iconfont icon-gouwuche"
                    ></p>
                  </div>
                  <div class="listBig2">
                    <img src="./../../../static/images/jurice.jpg">
                    <p class="listDlp1">VB钙片</p>
                    <p class="listDlp3">
                      <span>￥190.00</span>
                      /瓶
                    </p>
                    <p
                      style="background-color: #cd5511;margin:-10px 0px 0px 150px"
                      class="iconfont icon-gouwuche"
                    ></p>
                  </div>
                </div>
                <div class="big">
                  <div class="listBig2">
                    <img src="./../../../static/images/jurice.jpg">
                    <p class="listDlp1">VB钙片</p>
                    <p class="listDlp3">
                      <span>￥190.00</span>
                      /瓶
                    </p>
                    <p
                      style="background-color: #cd5511;margin:-10px 0px 0px 150px"
                      class="iconfont icon-gouwuche"
                    ></p>
                  </div>
                  <div class="listBig" style="margin-top:-20px">
                    <img src="./../../../static/images/jurice.jpg">
                    <p class="listDlp1">VB钙片</p>
                    <p class="listDlp2">推荐</p>
                    <p class="listDlp3">
                      <span>￥190.00</span>
                      /瓶
                    </p>
                    <p
                      style="background-color: #cd5511;margin:-10px 0px 0px 150px"
                      class="iconfont icon-gouwuche"
                    ></p>
                  </div>
                </div>
              </div>
              <!-- 生鲜农贸 -->
              <div class="fresh">
                <div class="fresh-top">
                  <div class="freshTopImg">
                    <img src="./../../../static/images/face.png">
                    <img src="./../../../static/images/face.png">
                    <img src="./../../../static/images/face.png">
                    <img src="./../../../static/images/face.png">
                    <img src="./../../../static/images/face.png">
                    <img src="./../../../static/images/face-right.png">
                  </div>
                  <div class="freshP">
                    <p>面膜</p>
                    <p>面膜</p>
                    <p>洗脸液</p>
                    <p>口红</p>
                    <p>香水</p>
                    <p>1111</p>
                  </div>
                </div>
                <div class="fresh-center">
                  <div class="fresh-center-left">
                    <ul>
                      <li>好面霜</li>
                      <li>优秀面霜</li>
                    </ul>
                  </div>
                  <div class="fresh-center-right">
                    <div class="fresh-center-right-top">
                      <p>只看促销</p>
                      <p>
                        综合排序
                        <span style="margin:0;color:#333;" class="iconfont icon-test178"></span>
                      </p>
                      <p>筛选</p>
                    </div>
                    <div class="listP" v-for="(site,key) in listData" :key="key">
                      <img :src="site.url">
                      <div class="listPRight">
                        <p class="listDlp1">{{site.name}}</p>
                        <p class="listDlp2">{{site.biao}}</p>
                        <p class="listDlp3">
                          <span>￥{{site.price}}</span>
                          /瓶
                        </p>
                        <p
                          style="background-color: #cd5511;margin:-10px 0px 0px 120px"
                          class="iconfont icon-gouwuche"
                        ></p>
                      </div>
                    </div>
                    <p class="listKong2"></p>
                  </div>
                </div>
              </div>
              <!-- 底部 -->
              <div class="listFooter">
                <dl>
                  <dt style="color:#cd5511;margin-left:0px" class="iconfont icon-home"></dt>
                  <dd>首页</dd>
                </dl>
                <dl>
                  <dt style="color:#595959;margin-left:0px" class="iconfont icon-test429"></dt>
                  <dd>商品</dd>
                </dl>
                <dl>
                  <dt style="color:#595959;margin-left:0px" class="iconfont icon-test230"></dt>
                  <dd>订单</dd>
                </dl>
                <dl>
                  <dt style="color:#595959;margin-left:0px" class="iconfont icon-gouwuche"></dt>
                  <dd>购物</dd>
                </dl>
                <dl>
                  <dt style="color:#595959;margin-left:0px" class="iconfont icon-test208"></dt>
                  <dd>我的</dd>
                </dl>
              </div>
            </div>
            <div class="contents-right">
              <h3>商品列表显示模式</h3>
              <div style="border-bottom:1px solid #e3e3e3">
                <div class="contents-right-radio">
                  <el-radio v-model="radio" label="1" @click.native='moList()'>默认列表</el-radio>
                  <el-radio v-model="radio" label="2" @click.native='moFast()'>快速下单</el-radio>
                  <el-radio v-model="radio" label="3" @click.native='moBig()'>大图模式</el-radio>
                  <el-radio v-model="radio" label="4" @click.native='moList()'>生鲜农贸</el-radio>
                </div>
              </div>
              <div class="field">
                <h3>显示字段</h3>
                <p>
                  * 显示字段，可选2个（如需添加自定义字段，请在
                  <router-link to="/">PC管理端 管理自定义字段</router-link>）
                </p>
                <div class="field-checked">
                  <el-checkbox v-model="checkedGoods">商品库存</el-checkbox>
                  <el-checkbox v-model="checkedGoodsGui">商品规格</el-checkbox>
                  <el-checkbox v-model="checkedGoodsBian">商品编号</el-checkbox>
                  <el-checkbox v-model="checkedCount">起订量</el-checkbox>
                  <el-checkbox v-model="checkedPrice">零售价</el-checkbox>
                  <el-checkbox v-model="checkedBuyCount">剩余库存+销量</el-checkbox>
                </div>
                <div class="field-checked2">
                  <el-checkbox v-model="checkedState">属性343</el-checkbox>
                  <el-checkbox v-model="checkedField">字段23</el-checkbox>
                </div>
              </div>
              <!-- 快速下单 -->
              <div class="fastRadio">
                <h3>分类排序</h3>
                <p>
                  * 如需修改分类排序，请在
                  <router-link to="/">PC管理端 管理商品分类</router-link>
                </p>
                <el-checkbox v-model="checkedSort" disabled style="margin-left:-460px">商品分类默认排序</el-checkbox>
                <p style='border-top:1px solid #e3e3e3;margin-top:10px'></p>
                <div class="fsatRadios">
                  <h3>首屏默认分类</h3>
                  <div class="fastRadios-radio">
                    <el-radio v-model="radios" label="1">全部商品</el-radio>
                    <el-radio v-model="radios" label="2">推荐</el-radio>
                    <el-radio v-model="radios" label="3">新品</el-radio>
                    <el-radio v-model="radios" label="4">热销</el-radio>
                    <el-radio v-model="radios" label="5">常用清单</el-radio>
                    <el-radio v-model="radios" label="6">首个分类</el-radio>
                  </div>
                </div>
              </div>
              <!-- 分类图标 -->
              <div class="freshRedio">
                <h3>分类图标</h3>
                <div>
                  <el-radio v-model="radiosFresh" label="1">显示</el-radio>
                  <el-radio v-model="radiosFresh" label="2">隐藏</el-radio>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      isActive1: false,
      liRes: true,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActive5: false,
      isActive6: false,
      isActive7: false,
      isActive8: false,
      isActive9: false,
      showTop: false,
      // 快速下单
      showKong: false,
      // 默认列表：
      listData: [
        {
          url: require('./../../../static/images/jurice.jpg'),
          name: 'VB钙片',
          biao: '推荐',
          price: '190.00'
        }, {
          url: require('./../../../static/images/jurice.jpg'),
          name: 'VB钙片',
          biao: '推荐',
          price: '190.00'
        }, {
          url: require('./../../../static/images/jurice.jpg'),
          name: 'VB钙片',
          biao: '推荐',
          price: '190.00'
        }, {
          url: require('./../../../static/images/jurice.jpg'),
          name: 'VB钙片',
          biao: '推荐',
          price: '190.00'
        }],
      showMo: false,
      showFast: false,
      showType: false,
      // 商品列表显示模式
      radio: '1',
      checkedGoods: false,
      checkedGoodsBian: false,
      checkedGoodsGui: false,
      checkedCount: false,
      checkedPrice: false,
      checkedBuyCount: false,
      checkedState: false,
      checkedField: false,
      // 默认
      showFieldMo: false,
      checkedSort: true,
      radios: 1,
      // 生鲜
      radiosFresh: false
    }
  },
  methods: {
    li1 () {
      this.isActive1 = true
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
      this.$router.push({
        path: '/marketingMallPhone'
      })
    },
    li2 () {
      this.isActive2 = true
      this.isActive1 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
      this.$router.push({
        path: '/marketingMallPhoneList'
      })
    },
    li3 () {
      this.isActive3 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li4 () {
      this.isActive4 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li5 () {
      this.isActive5 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li6 () {
      this.isActive6 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li7 () {
      this.isActive7 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li8 () {
      this.isActive8 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive9 = false
    },
    li9 () {
      this.isActive9 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  background-color: #f0fbff;
  border-radius: 50%;
}
#app {
  background-color: #fff !important;
  height: 655px;
}
.header {
  display: flex;
}
.elTabs {
  width: 75%;
  margin-top: 7px;
}
.elTabs /deep/ .el-tabs__item {
  width: 100px;
  text-align: center;
}
.header > img {
  width: 115px;
  height: 25px;
  margin-top: 10px;
  border-bottom: 2px solid #e3e3e3;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 10px;
}
.header > p {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3e3e3;
  height: 25px;
  font-size: 12px;
  color: #595959;
  z-index: 5;
}
.headerP1 {
  padding-right: 30px;
}
.headerP2 {
  padding-right: 67px;
}
.phone {
  display: flex;
  position: relative;
  top: -15px;
  text-align: center;
}
.phoneLeftUl {
  width: 145px;
  height: 610px;
  border-right: 1px solid #e3e3e3;
}
.phoneLeftUl > li:nth-child(1) {
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  line-height: 50px;
}
.phoneLeftUl > li:nth-child(1):hover {
  color: #333;
}
.phoneLeftUl > li:nth-child(6) {
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  line-height: 50px;
}
.phoneLeftUl > li:nth-child(6):hover {
  color: #333;
}
.phoneLeftUl > li {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.phoneLeftUl > li:hover {
  color: #20ade5;
  cursor: pointer;
}
.active {
  background-color: #e6f7ff;
  color: #20ade5;
}
.phone-right {
  width: 100%;
  height: 610px;
  background-color: #f6f8fa;
}
.liResuant {
  margin: 10px;
  margin-bottom: 0;
  width: calc(100%-20px);
  height: 600px;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
}
.liResRow {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  border-bottom: 1px solid #e3e3e3;
}
.liResRow span:nth-child(1) {
  color: #8c8c8c;
}
.liResIc1 {
  width: 65px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  text-align: center;
  line-height: 35px;
  margin-top: 15px;
  cursor: pointer;
}
.liResIc2 {
  background-color: #20ade5;
  width: 65px;
  height: 35px;
  border-radius: 5px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin: 15px 0px 0px 20px;
  cursor: pointer;
}
.liResuant-contents {
  display: flex;
  padding: 20px 0px 0px 30px;
}
.contents-left {
  width: 380px;
  background-color: #fff;
  box-shadow: 0px 0px 5px 5px #f2f2f2;
}
.contents-left-ul {
  display: flex;
  justify-content: space-around;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
}
.contents-left-ul > li {
  width: 25%;
}
.contents-left-ul > li:nth-child(1) {
  color: #cd5511;
}
.contents-left-ul > li:nth-child(2) {
  background: url("./../../../static/images/jian.png") no-repeat;
  background-position: 65px center;
}
.contents-left-ul > li:nth-child(3) {
  background: url("./../../../static/images/jian.png") no-repeat;
  background-position: 65px center;
}
.contents-left-ul > li:last-child {
  background: url("./../../../static/images/shai.png") no-repeat;
  background-position: 65px center;
}
.contents-left-list {
  width: 100%;
  border-top: 1px solid #e3e3e3;
}
.contents-left-list-kong {
  height: 10px;
  background-color: #f9f9f9;
  border-top: 1px solid #e3e3e3;
}
.listP {
  padding: 10px 0px 0px 30px;
  display: flex;
  width: 100%;
}
.listP p {
  text-align: left;
  font-size: 14px;
}
.listP > img {
  width: 65px;
  height: 85px;
  margin-right: 20px;
}
.listDlp2 {
  width: 35px;
  height: 20px;
  border: 1px solid #f13131;
  border-radius: 5px;
  background-color: #fbc1c1;
  color: #f13131;
  font-size: 12px;
  text-align: center !important;
  line-height: 20px;
  margin: 5px 0px;
}
.listDlp3 {
  font-size: 12px;
}
.listDlp3 > span {
  color: #fa3815;
}
.iconfont {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center !important;
  line-height: 25px;
  color: #fff;
  margin: 0px 0px 0px 230px;
}
.listPRight {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 10px;
}
.listKong2 {
  width: 100%;
  height: 170px;
  background-color: #f9f9f9;
  margin-top: 10px;
}
.listFooter {
  display: flex;
  padding: 5px 0px 5px 20px;
  font-size: 12px;
  color: #999999;
  box-shadow: 0px 0px 5px 2px #e4e4e4;
}
.listFooter > dl {
  width: 25%;
  text-align: left;
}
.listFooter > dl dd {
  padding-left: 2px !important;
}
.listFooter > dl:nth-child(1) {
  color: #cd5511;
}
.fastOrder {
  display: flex;
  border-top: 1px solid #e3e3e3;
}
.fastOrder-left {
  height: 600px;
  background-color: #f6f6f6;
}
.fastOrder-left > ul li {
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  width: 95px;
  text-align: left;
  text-indent: 1.5em;
  margin-left: 5px;
}
.fastOrder-left > ul li:nth-child(1) {
  background-color: #fff;
  border-left: 4px solid #cd5511;
  color: #cd5511;
  font-size: 14px;
}
.fastOrderKong {
  width: 275px;
  height: 170px;
  background-color: #f9f9f9;
  margin-top: 5px;
}
.listBig {
  width: 200px;
  height: 300px;
}
.listBig > img {
  width: 140px;
  height: 180px;
  margin: 0 auto;
}
.listBig > p {
  text-align: left;
  font-size: 14px;
  margin-left: 20px;
}
.listBig2 {
  width: 185px;
  height: 265px;
}
.listBig2 > img {
  width: 185px;
  height: 185px;
}
.listBig2 > p {
  text-align: left;
  font-size: 14px;
  margin-left: 20px;
}
.big {
  display: flex;
}
.bigType {
  margin-bottom: -20px;
}
.fresh-top {
  padding-left: 20px;
}
.freshTopImg {
  display: flex;
  justify-content: space-around;
  padding-top: 5px;
}
.freshTopImg > img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.freshP {
  display: flex;
  justify-content: space-around;
}
.freshP > p {
  color: #999999;
  font-size: 12px;
  margin-top: 5px;
}
.freshP > p:last-child {
  color: #fff;
}
.fresh-center {
  border-top: 1px solid #e3e3e3;
  margin-top: 10px;
  display: flex;
}
.fresh-center-left > ul {
  height: 650px;
  background-color: #f9f9f9;
  width: 95px;
}
.fresh-center-left > ul li {
  height: 50px;
  line-height: 50px;
}
.fresh-center-left > ul li:nth-child(1) {
  border-left: 4px solid #cd5511;
  background-color: #fff;
  color: #cd5511;
}
.fresh-center-right-top {
  display: flex;
  color: #333333;
  justify-content: space-around;
  width: 280px;
  padding-top: 10px;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 10px;
}
.fresh-center-right-top > p:last-child {
  background: url("./../../../static/images/shai.png") no-repeat;
  background-position: 40px 5px;
  width: 60px;
  text-align: left;
}
.contents-right {
  padding: 0px 10px 0px 20px;
}
.contents-right > h3 {
  font-size: 14px;
  color: #595959;
  text-align: left;
  height: 30px;
}
.contents-right-radio {
  padding-bottom: 10px;
  margin-left: -210px;
}
.field {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 10px;
}
.field > h3 {
  font-size: 14px;
  color: #595959;
  text-align: left;
  line-height: 40px;
}
.field > p {
  color: #999999;
  font-size: 12px;
  text-align: left;
  margin-bottom: 10px;
}
.field > p a {
  color: #20ade5;
  border-bottom: 1px solid #20ade5;
}
.field-checked {
  display: flex;
}
.field-checked2 {
  display: flex;
  margin: 5px 0px 0px 10px;
}
.fastRadio {
  border-bottom:1px solid #e3e3e3;
  padding-bottom:10px;
}
.fastRadio > h3 {
  font-size: 14px;
  color: #595959;
  text-align: left;
  line-height: 40px;
}
.fastRadio > p {
  color: #999999;
  font-size: 12px;
  text-align: left;
  margin-bottom: 10px;
}
.fastRadio > p a {
  color: #20ade5;
  border-bottom: 1px solid #20ade5;
}
.fsatRadios > h3 {
  font-size: 14px;
  color: #595959;
  text-align: left;
  margin:10px 0px;
}
.fastRadios-radio {
  margin-left: -90px;
}
.freshRedio > h3 {
  font-size: 14px;
  color: #595959;
  text-align: left;
  line-height: 40px;
}
.freshRedio > div {
   margin-left: -500px;
}
</style>
